<template>
  <div class="archive-container">
    <!-- 按月分组渲染 -->
    <div class="month-group" v-for="(group, groupIndex) in archiveList" :key="groupIndex">
      <!-- 月份标题 -->
      <div class="month-title">{{ group.month }}</div>

      <!-- 当月文章列表 -->
      <div class="article-list">
        <div class="article-item" v-for="(article, artIndex) in group.articles" :key="artIndex">
          <!-- 文章封面图 -->
          <img :src="article.titleImage" alt="文章封面" class="article-img" @error="handleImgError(article)">

          <!-- 文章信息 -->
          <div class="article-info">
            <h4 class="article-title">
              <router-link :to="{ name: 'ArticleDetail', params: { id: article.id } }">
                {{ article.title }}
              </router-link>
            </h4>
            <div class="article-date">
              <i class="date-icon"></i> <!-- 日期图标（通过CSS实现） -->
              {{ article.createTime }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 分页控件 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
      :current-page="pageParams.current" :page-sizes="[5, 10, 20]" :page-size="pageParams.size"
      layout="total, sizes, prev, pager, next, jumper" :total="total" class="pagination"></el-pagination>
  </div>
</template>

<script>
export default {
  name: 'ArchiveChild',
  data() {
    return {
      archiveList: [], // 接口返回的按月分组数据
      total: 0,        // 总条数
      pageParams: {
        current: 1,
        size: 10
      }
    };
  },
  created() {
    this.getArchiveData(); // 初始化加载数据
  },
  methods: {
    // 请求接口数据
    async getArchiveData() {
      try {
        const res = await this.$axios.post(
          'http://47.104.167.34:9110/api/archive/list',
          this.pageParams
        );
        if (res.data.success) {
          this.archiveList = res.data.data; // 赋值分组数据
          this.total = res.data.total;
        }
      } catch (error) {
        console.error('接口请求失败:', error);
      }
    },
    // 图片加载失败时显示默认图
    handleImgError(article) {
      article.titleImage = 'https://picsum.photos/80/50?grayscale'; // 默认占位图
    },
    // 分页方法（保持不变）
    handleSizeChange(size) {
      this.pageParams.size = size;
      this.pageParams.current = 1;
      this.getArchiveData();
    },
    handleCurrentChange(current) {
      this.pageParams.current = current;
      this.getArchiveData();
    }
  }
};
</script>

<style scoped>
/* 容器样式 */
.archive-container {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

/* 月份分组样式 */
.month-group {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-bottom: 20px;
  overflow: hidden;
}

/* 月份标题 */
.month-title {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  padding: 12px 20px;
  background: #f5f5f5;
  border-bottom: 1px solid #eee;
}

/* 文章列表容器 */
.article-list {
  padding: 10px 0;
}

/* 单篇文章样式 */
.article-item {
  display: flex;
  align-items: center;
  padding: 12px 20px;
  border-bottom: 1px solid #f5f5f5;
  transition: background 0.2s;
}

.article-item:last-child {
  border-bottom: none;
}

.article-item:hover {
  background: #fafafa;
}

/* 文章封面图 */
.article-img {
  width: 80px;
  height: 50px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  /* 防止图片被压缩 */
}

/* 文章信息区域 */
.article-info {
  margin-left: 15px;
  flex-grow: 1;
  /* 占满剩余空间 */
}

/* 文章标题 */
.article-title {
  margin: 0 0 5px 0;
  font-size: 15px;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 日期样式 */
.article-date {
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
}

/* 日期图标（通过CSS绘制小日历图标） */
.date-icon {
  width: 12px;
  height: 12px;
  margin-right: 5px;
  background: #eee;
  position: relative;
}

.date-icon::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 12px;
  height: 2px;
  background: #eee;
}

/* 分页样式 */
.pagination {
  margin-top: 30px;
  text-align: right;
}
</style>